<template>
  <div class="container">
    <div>
      <el-menu class="el-menu-demo" mode="horizontal" background-color="#5CB87A" text-color="#fff" active-text-color="#fff">
        <el-menu-item v-show="showButton" index="9" @click="login">
          <span>登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
        </el-menu-item>
        <el-menu-item v-show="showButton" index="10" @click="register">
          <span>注&nbsp;&nbsp;&nbsp;&nbsp;册</span>
        </el-menu-item>
        <el-menu-item v-show="!showButton" index="11" @click="toManageAttraction">
          <span>景点管理</span>
        </el-menu-item>
        <el-menu-item v-show="!showButton" index="11" @click="toManageNews">
          <span>资讯管理</span>
        </el-menu-item>

        <el-menu-item v-show="!showButton" index="12" @click="logout">
          <span>退出登录</span>
        </el-menu-item>

      </el-menu>
    </div>

  </div>

</template>

<script>
import Carousel from "./Carousel.vue";
import Search from "./Search.vue";
import getters from "@/store/getters";
import { reqGetUser } from "@/api/index";

export default {
  name: "MyHeader",
  data() {
    return {
      isAdmin: localStorage.getItem("username") == "yeswater123",
      showButton: localStorage.getItem("token") == null,
      // token: localStorage.getItem('token')==null,
      username: localStorage.getItem("username"),
      userInfo: this.$store.getters.getUserInfo,
      id: 1,
    };
  },

  components: {
    Carousel,
    Search,
  },
  methods: {
    toManageAttraction() {
      this.$router.push({
        name: "manageAttraction",
      });
    },
    toManageNews() {
      this.$router.push({
        name: "manageNews",
      });
    },
    login() {
      this.$router.push({
        name: "login",
      });
      this.showButton = !this.showButton;
    },
    getAttractions() {
      this.$router.push({
        name: "attraction",
      });
    },
    addAttraction() {
      this.$router.push({
        name: "addAttraction",
      });
    },
    getNews() {
      this.$router.push({
        name: "news",
      });
    },
    addNews() {
      this.$router.push({
        name: "addNews",
      });
    },
    register() {
      this.$router.push({
        name: "register",
      });
    },

    async getUserInfo() {
      const result = await reqGetUser({ username: this.username });
      console.log("result", result.data);

      this.$router.push({
        name: "userInfo",
        params: {
          id: result.data.id,
          username: result.data.username,
          password: result.data.password,
          age: result.data.age,
          phone: result.data.phone,
          email: result.data.email,
        },
      });
    },
    logout() {
      this.$store.dispatch("userLogout");
      localStorage.removeItem("username");
      localStorage.removeItem("userId");
      localStorage.removeItem("token");
      this.showButton = !this.showButton;
      this.$router.replace({ name: "main" });
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  border-bottom-width: 0px;
  margin-bottom: -1px;
}
</style>
